<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台管理-注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/login_v3.css}" media="all">

    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div id="app">
    <div id="VIEW-login" lay-title="注册">
        <div class="login-wrap">
            <div class="layui-container">
                <div class="layui-row">
                    <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4 align-center">
                        <div class="layui-logo"><span>blue<b>wind</b>&nbsp;boot</span></div>
                    </div>
                    <div class="layui-col-xs12 layui-col-lg4 layui-col-lg-offset4">
                        <div class="layui-form" lay-filter="login-form">
                            <!--切换模块-->
                            <ul class="login-type-tab">
                                <li login-type="password" class="active">注册</li>
                            </ul>
                            <!--常规表单注册显示模块-->
                            <div class="normal-login-form">
                                <!--邮箱div-->
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-email"></label>
                                    <input type="text" name="email" placeholder="请输入注册邮箱" maxlength="90" autocomplete="off" class="layui-input">
                                </div>
                                <!--图形验证码div-->
                                <div class="layui-form-item">
                                    <div class="layui-row">
                                        <div class="layui-col-xs8">
                                            <label class="layui-icon label-icon layui-icon-vercode"></label>
                                            <input type="text" name="kaptchaCode" maxlength="4" placeholder="图形验证码" class="layui-input" autocomplete="off">
                                        </div>
                                        <div class="layui-col-xs4">
                                            <img class="codeimg" alt="看不清? 点击刷新" title="看不清? 点击刷新" />
                                        </div>
                                    </div>
                                </div>
                                <!--邮箱验证码div-->
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-cellphone"></label>
                                    <input type="text" name="emailCode" maxlength="6" placeholder="邮箱验证码" class="layui-input" autocomplete="off">
                                    <button class="layui-btn layui-btn-danger layui-btn-sm sendsms">获取验证码</button>
                                </div>
                                <!--用户名div-->
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-username"></label>
                                    <input type="text" name="username" id="username" placeholder="请输入登录用户名" autocomplete="off" class="layui-input">
                                </div>
                                <!--密码div-->
                                <div class="layui-form-item">
                                    <label class="layui-icon label-icon layui-icon-password"></label>
                                    <input type="password" name="password" id="password" placeholder="请输入登录密码" autocomplete="off" class="layui-input">
                                </div>
                                <!--注册按钮div-->
                                <div class="layui-form-item">
                                    <button class="layui-btn layui-btn-normal layui-btn-fluid" lay-submit lay-filter="register-submit" id="register-submit">
                                        <i style="display: none" class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop"></i>
                                        <span class="btn-text">立即注册</span>
                                    </button>
                                </div>
                                <!--两个链接div-->
                                <div class="layui-form-item">
                                    <a lay-href="/admin/login" th:href="@{'/admin/login'}">返回登录</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/md5/md5.min.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>

<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    layui.use(['form', 'layNotify', 'util'], function () {
        var form = layui.form,
            util = layui.util,
            layNotify = layui.layNotify;

        // 定义email_key
        var email_key;


        // 发送邮箱验证码的按钮
        var viewSendEmailBtn = $('.sendsms');

        // 发送邮箱验证码的按钮的点击事件
        viewSendEmailBtn.click(function () {
            var self = $(this);

            var emailInput = $('input[name="email"]').val();
            var kaptchaCodeInput = $('input[name="kaptchaCode"]').val();
            // 按钮不可点击态，直接返回
            if (self.hasClass('layui-btn-disabled')) {
                return false;
            }
            // 校验邮箱和图形验证码是否正确，正确了才能允许发送验证码
            var reg = layui.form.config.verify.email[0];
            if (!reg.test(emailInput)) {
                layer.msg('请输入正确的邮箱');
                return false;
            }
            if (!(kaptchaCodeInput.length == 4)) {
                layer.msg('请输入正确的图形验证码');
                return false;
            }

            var data = {
                "kaptchaCode": kaptchaCodeInput,
                "kaptchaKey": [[${kaptcha_key}]],
                "email": emailInput
            }
            AjaxUtil.post({
                contentType: "application/x-www-form-urlencoded", // 默认就是这个
                url: AjaxUtil.ctx + "admin/sendEmail",
                data: data,
                success: function (res) {
                    if (res.code === 0) {
                        email_key = res.data.email_key;
                        layNotify.notice({
                            title: "获取邮箱验证码提示",
                            type: "success",
                            message: res.message
                        });

                        // 获取成功，则将按钮设置成不允许点击，60秒内只允许一次
                        self.addClass('layui-btn-disabled');
                        var defHtml = self.html();
                        var startTime = new Date().getTime();
                        var endTime = startTime + 59000;
                        util.countdown(endTime, startTime, function (date, time, timer) {
                            var second = date[3];
                            self.html(second + ' 秒');
                            if (second <= 0) {
                                self.removeClass('layui-btn-disabled').html(defHtml);
                                clearInterval(timer);
                            }
                        });
                    } else {
                        loginend();
                        layNotify.notice({
                            title: "获取邮箱验证码提示",
                            type: "warning",
                            message: res.message
                        });
                        document.querySelector(".codeimg").click();
                    }
                },
                error: function (error) {
                    layNotify.notice({
                        title: "获取邮箱验证码提示",
                        type: "error",
                        message: "获取邮箱验证码失败提示，请联系系统管理员！"
                    });
                }
            });
        });


        // 提交登录表单
        form.on('submit(register-submit)', function (data) {
            let formdata = data.field;
            if (!formdata.username) {
                layer.msg('用户名不能为空');
                return false;
            }
            if (!formdata.password) {
                layer.msg('密码不能为空');
                return false;
            }
            if (!formdata.email) {
                layer.msg('邮箱不能为空');
                return false;
            }
            if (!formdata.emailCode) {
                layer.msg('邮箱验证码不能为空');
                return false;
            }
            if (!email_key) {
                layer.msg('未获取邮箱验证码');
                return false;
            }

            // 设置按钮为登陆中，此时禁止点击
            logining();

            // 加密输入的密码
            let submitdata = {
                "username": formdata.username,
                "password": md5.MD5(formdata.password),
                "email": formdata.email,
                "emailCode": formdata.emailCode,
                "emailKey": email_key
            }

            AjaxUtil.post({
                contentType: "application/x-www-form-urlencoded", // 默认就是这个
                url: AjaxUtil.ctx + "admin/doRegister",
                data: submitdata,
                success: function (res) {
                    if (res.code === 0) {
                        layNotify.notice({
                            title: "注册提示",
                            type: "success",
                            message: res.message
                        });
                        setTimeout(function () {
                            window.location.href = AjaxUtil.ctx + "admin/index";
                        }, 1000);
                    } else {
                        loginend();
                        layNotify.notice({
                            title: "注册提示",
                            type: "warning",
                            message: res.message
                        });
                        document.querySelector(".codeimg").click();
                    }
                },
                error: function (error) {
                    loginend();
                    layNotify.notice({
                        title: "注册提示",
                        type: "error",
                        message: "请求失败，请联系系统管理员！"
                    });
                }
            });


            return false;
        });



        // 注册中
        function logining() {
            var button = $('.layui-btn-fluid');
            var loading = button.find('.layui-icon');
            var btntext = button.find('.btn-text');
            if (loading.is(":visible")) {
                return;
            }
            // 如果拥有layui-btn-disabled css，说明不可点击直接return，防止重复提交
            if (button.hasClass('layui-btn-disabled')) {
                return;
            }
            // 设置按钮为不可点击状态
            button.addClass('layui-btn-disabled');
            // 改变按钮文字
            btntext.text('正在注册');
            // 设置loading图标为显示状态
            loading.show();
        }

        // 注册后
        function loginend() {
            var button = $('.layui-btn-fluid');
            var loading = button.find('.layui-icon');
            var btntext = button.find('.btn-text');
            // 恢复登陆按钮状态和loading图标状态
            button.removeClass('layui-btn-disabled');
            btntext.text('立即注册');
            loading.hide();
        }


        // 图形验证码模块
        let kaptcha_key = [[${kaptcha_key}]];
        getKaptcha(kaptcha_key);
        // 图形验证码点击事件（短信登陆）
        $(".codeimg").click(function () {
            let kaptcha_key = [[${kaptcha_key}]];
            getKaptcha(kaptcha_key);
        });
        // 获取图形验证码（邮箱登陆）
        function getKaptcha(kaptcha_key) {
            AjaxUtil.get({
                url: AjaxUtil.ctx + "kaptcha/getImage?kaptcha_key=" + kaptcha_key,
                dataType: "text",
                success: function (res) {
                    $(".codeimg").attr("src", res);
                },
                error: function (error) {
                    layNotify.notice({
                        title: "提示",
                        type: "warning",
                        message: "获取验证码错误，请联系系统管理员!"
                    });
                }
            });
        }


        // 键盘回车注册
        $('body').keydown(function () {
            if (13 == event.keyCode) {
                $('#register-submit').trigger('click');
            }
        });
    });
</script>

</body>
</html>